<template>
  <view class="page-container">
    <!-- 顶部带背景色的导航栏 -->
    <view class="nav-bar">
      <image
        class="back-icon"
        src="../../static/icons/back.png"
        @tap="goBack"
      />
      <text class="nav-title">添加护理记录（{{ customerName }}）</text>
    </view>

    <!-- 滚动区域 -->
    <scroll-view class="scroll-content" scroll-y>
      <view class="form-wrapper">
        <!-- 只读字段统一使用 readonly-input -->
        <view class="form-item">
          <text class="label">客户姓名</text>
          <input
            class="input readonly-input"
            v-model="form.customerName"
            readonly
          />
        </view>

        <view class="form-item">
          <text class="label">项目编号</text>
          <input
            class="input readonly-input"
            v-model="form.projectId"
            readonly
          />
        </view>

        <view class="form-item">
          <text class="label">护理项目</text>
          <input
            class="input readonly-input"
            v-model="form.projectName"
            readonly
          />
        </view>

        <!-- 护理开始时间 -->
        <view class="form-item">
          <text class="label">开始日期</text>
          <picker
            mode="date"
            :value="form.careStartTimeDate"
            @change="onStartDateChange"
          >
            <view class="picker">
              {{ form.careStartTimeDate || '请选择开始日期' }}
              <image class="picker-icon" src="../../static/icons/calendar.png"/>
            </view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">开始时分</text>
          <picker
            mode="time"
            :value="form.careStartTimeTime"
            @change="onStartTimeChange"
          >
            <view class="picker">
              {{ form.careStartTimeTime || '请选择时分' }}
              <image class="picker-icon" src="../../static/icons/calendar.png"/>
            </view>
          </picker>
        </view>

        <!-- 护理结束时间 -->
        <view class="form-item">
          <text class="label">结束日期</text>
          <picker
            mode="date"
            :value="form.careEndTimeDate"
            @change="onEndDateChange"
          >
            <view class="picker">
              {{ form.careEndTimeDate || '请选择结束日期' }}
              <image class="picker-icon" src="../../static/icons/calendar.png"/>
            </view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">结束时分</text>
          <picker
            mode="time"
            :value="form.careEndTimeTime"
            @change="onEndTimeChange"
          >
            <view class="picker">
              {{ form.careEndTimeTime || '请选择时分' }}
              <image class="picker-icon" src="../../static/icons/calendar.png"/>
            </view>
          </picker>
        </view>

        <!-- 护理数量 -->
        <view class="form-item">
          <text class="label">护理数量</text>
          <view class="counter">
            <button class="btn-step" @tap="decrement">－</button>
            <text class="count">{{ form.careCount }}</text>
            <button class="btn-step" @tap="increment">＋</button>
          </view>
        </view>

        <!-- 护理内容 -->
        <view class="form-item">
          <text class="label">护理内容</text>
          <textarea
            class="textarea"
            v-model="form.careDetails"
            placeholder="请输入护理内容"
          />
        </view>
      </view>
    </scroll-view>

    <!-- 固定在底部的确认按钮 -->
    <view class="footer">
      <button class="btn-submit" @tap="onSubmit">确定</button>
    </view>
  </view>
</template>

<script>
import { addCareRecord } from '@/api/client'

export default {
  name: 'CareRecordAdd',
  data() {
    return {
      customerId: null,
      customerName: '',
      projectId: null,
      projectName: '',
      form: {
        careStartTimeDate: '',
        careStartTimeTime: '',
        careEndTimeDate: '',
        careEndTimeTime: '',
        careDetails: '',
        careCount: 1
      }
    }
  },
  onLoad(options) {
    // 接收并存储
    this.customerId   = +options.customerId
    this.customerName = decodeURIComponent(options.customerName || '')
    this.projectId    = +options.projectId
    this.projectName  = decodeURIComponent(options.projectName || '')

    // 同步到 form 中（如果后端需要这些字段，也可以直接放到 DTO 里）
    this.form.customerId   = this.customerId
    this.form.customerName = this.customerName
    this.form.projectId    = this.projectId
    this.form.projectName  = this.projectName
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    onStartDateChange(e) {
      this.form.careStartTimeDate = e.detail.value
    },
    onStartTimeChange(e) {
      this.form.careStartTimeTime = e.detail.value
    },
    onEndDateChange(e) {
      this.form.careEndTimeDate = e.detail.value
    },
    onEndTimeChange(e) {
      this.form.careEndTimeTime = e.detail.value
    },
    decrement() {
      if (this.form.careCount > 1) this.form.careCount--
    },
    increment() {
      this.form.careCount++
    },
    async onSubmit() {
      const f = this.form
      if (!f.careStartTimeDate || !f.careStartTimeTime) {
        return uni.showToast({ title: '请选择开始时间', icon: 'none' })
      }
      if (!f.careEndTimeDate   || !f.careEndTimeTime) {
        return uni.showToast({ title: '请选择结束时间', icon: 'none' })
      }
      // 拼成后端能识别的 "yyyy-MM-dd HH:mm:ss"
      const start = `${f.careStartTimeDate} ${f.careStartTimeTime}:00`
      const end   = `${f.careEndTimeDate} ${f.careEndTimeTime}:00`

      if (end < start) {
        return uni.showToast({ title: '结束时间不能早于开始时间', icon: 'none' })
      }
      if (f.careCount < 1) {
        return uni.showToast({ title: '护理数量至少为 1', icon: 'none' })
      }

      const dto = {
        customerId:   this.customerId,
        customerName: this.customerName,
        projectId:    this.projectId,
        projectName:  this.projectName,
        careStartTime: start,
        careEndTime:   end,
        careDetails:   f.careDetails,
        careCount:     f.careCount
      }

      try {
        await addCareRecord(dto)
        uni.showToast({ title: '添加成功', icon: 'success' })
        setTimeout(() => this.goBack(), 800)
      } catch (err) {
        console.error('添加护理记录失败', err)
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f1f9f9;
}
/* 顶部导航 */
.nav-bar {
  display: flex;
  align-items: center;
  height: 130px;
  padding-top: 55px;
  padding: 0 16px;
  background-image: url('/static/images/background1.png');
  background-size: cover;
  background-position: center;
}
.back-icon { width:24px; height:24px }
.nav-title {
  flex:1; text-align:center;
  color:#fff; font-size:18px; font-weight:bold;
}

/* 滚动区域 */
.scroll-content {
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
}

/* 表单区 */
.form-wrapper {
  padding:16px;
  background:#fff;
  border-top-left-radius:16px;
  border-top-right-radius:16px;
  padding-bottom: 100px; /* 留出底部按钮高度 */
}
.form-item { margin-bottom:16px }
.label { display:block; margin-bottom:6px; font-size:14px; color:#333; }
.input { /* 默认 editable */
  height:36px; padding:0 12px;
  border:1px solid #ddd; border-radius:6px;
  background:#fafafa; font-size:14px;
}
/* 只读灰色背景 */
.readonly-input {
  background-color: #f5f5f5;
  color: #888;
}
.picker {
  height:36px; line-height:36px; padding:0 12px;
  border:1px solid #ddd; border-radius:6px;
  background:#fafafa; position:relative; font-size:14px;
}
.picker-icon {
  position:absolute; right:12px; top:50%;
  width:20px; height:20px; transform:translateY(-50%);
}

/* 数量控制 */
.counter {
  display:flex; align-items:center;
  border:1px solid #ddd; border-radius:6px;
  overflow:hidden; width:120px;
}
.btn-step {
  flex:0 0 32px; height:32px;
  text-align:center; line-height:32px;
  background:#eee; font-size:18px; color:#333;
}
.count {
  flex:1; text-align:center; font-size:14px;
}

/* 文本域 */
.textarea {
  width:90%; min-height:80px; padding:8px;
  border:1px solid #ddd; border-radius:6px;
  font-size:14px; background:#fafafa;
  resize:none;
}

/* 底部确定按钮 */
.footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding:16px; background:#fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.btn-submit {
  width:100%; height:40px;
  background:#00c3b0; color:#fff;
  font-size:16px; border-radius:20px;
}
</style>
